<template>
  <div class="form-modal">
    <div class="modal-header">
      <div class="title">重置密码</div>
      <mds-steps :current="current" size="small" v-if="current===0 || current===1 || current===2" :status="status">
        <mds-step title="身份验证"/>
        <mds-step title="重置密码"/>
        <mds-step title="设置完成"/>
      </mds-steps>
    </div>
    <div class="modal-content">
      <div class="authentication" v-show="current === 0">
        <p>点击获取验证码，短信将发送至安全手机138*****000</p>
        <div class="form-item">
          <mds-input v-model="formValue.verificationCode" placeholder="图片验证码"></mds-input>
          <mds-button type="primary" size="large" :disabled="!iscanclick" @click="getCode">{{!iscanclick? secondsLeft + 's后重新获取': '获取验证码'}}</mds-button>
          <div class="error-msg" v-show="isError">
            <mds-icon type="exclamation-circle" />
            请填写正确的验证码
          </div>
        </div>
        <mds-button type="primary" size="large" :loading="!this.formValue.verificationCode.length" block @click="onNext()">下一步</mds-button>
      </div>
      <div class="reset-password" v-show="current === 1">
        <div class="form-item">
          <label>新密码</label>
          <div class="form-item-content">
            <mds-input v-model="formValue.newPassword" placeholder="请输入新密码"></mds-input>
            <p>密码至少由8个字符组成，必须包含数字、字母，区分大小写</p>
          </div>
        </div>
        <div class="form-item">
          <label>确认密码</label>
          <div class="form-item-content">
            <mds-input v-model="formValue.truePassword" placeholder="请再次输入新密码"></mds-input>
          </div>
        </div>
        <div class="form-item">
          <label>验证码</label>
          <div class="form-item-content">
            <mds-input v-model="formValue.verificationCodes" placeholder="图片验证码"></mds-input>
            <i class="icon-code"></i>
          </div>
        </div>
        <div class="form-item">
          <label></label>
          <div class="form-item-content">
            <mds-button type="primary" size="large" block :loading="!isLoading" @click="onSubmit()">完 成</mds-button>
          </div>
        </div>
      </div>
      <div class="setup-succeeded" v-show="current === 2">
        <div class="state-logo">
          <mds-icon type="check-circle" />
          <p>密码重置成功</p>
        </div>
        <p>请使用新的密码重新登录</p>
        <mds-button>登录</mds-button>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formValue: {
        newPassword: '',
        truePassword: '',
        verificationCode: '',
        verificationCodes: ''
      },
      current: 0,
      iscanclick: true,
      secondsLeft: 60,
      timer: null,
      isError: false
    }
  },
  computed: {
    nextFlag: function() {
      return !(!this.iscanclick && this.formValue.verificationCode.length === 6 && (/^[0-9]+$/.test(this.formValue.verificationCode)))
    },
    isLoading: function() {
      return this.formValue.newPassword && this.formValue.truePassword && this.formValue.verificationCodes
    },
    status: function() {
      return this.current === 2 ? 'finish' : 'process'
    }
  },
  watch: {
    secondsLeft(val) {
      console.log(val)
      if (val <= 0) {
        this.iscanclick = true
        this.timer && clearInterval(this.timer)
        this.secondsLeft = 60
      }
    }
  },
  methods: {
    changeCurrent(a, b) {
      console.log(a, b)
    },
    getCode() {
      this.iscanclick = false
      this.timer = setInterval(() => {
        this.secondsLeft--
      }, 1000)
    },
    onNext() {
      if (this.nextFlag) {
        this.isError = true
      } else {
        this.current = -1
        this.timer && clearInterval(this.timer)
        setTimeout(() => {
          this.current = 1
        }, 300)
      }
    },
    onSubmit() {
      if (this.isLoading) {
        this.current = -1
        this.timer && clearInterval(this.timer)
        setTimeout(() => {
          this.current = 2
        }, 300)
      }
    }
  }
}
</script>

<style lang="scss">
.form-modal{
  .mds-steps {
    width: 320px;
    margin-left: 40px;
  }
  .mds-steps-main {
    position:absolute;
    width: 66px;
    left: 32px;
    top: 0px;
    z-index: 9 !important;
    .mds-steps-title {
      background: #fff;
      font-size:14px;
    }
  }
  .mds-steps .mds-steps-item.mds-steps-status-process .mds-steps-head-inner{
    background-color: #fff;
    >.mds-steps-icon {
      color: #0364ff;
    }
  }
  .mds-steps .mds-steps-item.mds-steps-status-wait .mds-steps-head-inner {
    background-color: #fff;
  }
  .mds-steps .mds-steps-item.mds-steps-status-finish .mds-steps-head-inner {
    background-color: #0364ff;
    >.mds-steps-icon {
      color: #fff;
    }
  }
  .mdsicon-check-circle {
    font-size: 48px;
    color: #00BA00;
  }
  .mds-btn-primary[disabled] {

  }
}

</style>

<style lang="scss" scoped>
.form-modal {
  width: 640px;
  min-height: 383px;
  margin: 120px auto 0;
  background: #fff;
  // padding: 24px 20px 24px;
  box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  .modal-header {
    padding-bottom: 24px;
    padding-left: 18px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(53, 64, 82, 1);
    line-height: 24px;
    border-bottom: solid 1px rgba(0,0,0,0.09);
    display:flex;
    padding: 26px 40px;
    .title {
      font-size:20px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(53,64,82,1);
    }
  }
  .modal-content {
    padding: 16px 22px 0 0;
    .authentication{
      width: 360px;
      margin: 40px auto;
      padding-bottom: 122px;
      p{
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(53,64,82,1);
        line-height:22px;
        margin-bottom: 8px;
      }
      .form-item{
        position: relative;
        margin-bottom: 40px;
        input{
          display: block;
        }
        button {
          position: absolute;
          top: 4px;
          right: 4px;
          height: 28px;
          padding: 5px 12px;
          font-size: 14px;
          outline: none;
          border-radius:2px;
        }
        .error-msg {
          position: absolute;
          top: 48px;
          left: 0;
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:#EE3333;
          line-height:22px;
          i{
            margin-right: 4px;
          }
        }
      }
    }
    .reset-password {
      padding: 40px 71px 80px;
    }
    .setup-succeeded {
      text-align: center;
      padding-bottom: 60px;
      .state-logo {
        padding-top: 24px;
        p{
          font-size:16px;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(53,64,82,1);
          line-height:24px;
          margin: 16px 0;
        }
      }
      p{
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(127,143,164,1);
        line-height:22px;
        margin-bottom: 40px;
      }
      button {
        width:128px;
        height:36px;
        border-radius:4px;
        border:1px solid rgba(202,210,221,1);
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(53,64,82,1);
      }
    }
    .form-item {
      display: flex;
      margin-bottom: 16px;
      &:last-child {
        margin-top: 40px;
      }
      label {
        width: 98px;
        text-align: right;
        padding-right: 24px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(127, 143, 164, 1);
        line-height: 36px;
      }
      .form-item-content {
        flex: 1;
        position: relative;
        .icon-code {
          width: 77px;
          height: 28px;
          position: absolute;
          top: 4px;
          right: 4px;
          background: url(../../../assets/registration_img/code.png) no-repeat center center;
          background-size: contain;
        }
        p {
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(169,171,186,1);
          line-height:22px;
        }
      }
    }
  }
}
</style>
